<!DOCTYPE html>
<html style="height: 100%" lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">

	<div id="main" style="height: 100%"></div>
<!-- 引入jquery -->
<script type="text/javascript" th:src="@{/ajax/libs/jquery/3.5.0/dist/jquery.min.js}"></script>
	<script type="text/javascript"
		th:src="@{/ajax/libs/echarts/5.0.1/dist/echarts.min.js}"></script>
	<script type="text/javascript">
	var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';

	var chartDom = document.getElementById('main');
	var myChart = echarts.init(chartDom);
	var option;

	myChart.showLoading();

	myChart.showLoading();
	$.get(ROOT_PATH + '/data/asset/data/webkit-dep.json', function (webkitDep) {
	    myChart.hideLoading();

	    option = {
	        legend: {
	            data: ['HTMLElement', 'WebGL', 'SVG', 'CSS', 'Other']
	        },
	        series: [{
	            type: 'graph',
	            layout: 'force',
	            animation: false,
	            label: {
	                position: 'right',
	                formatter: '{b}'
	            },
	            draggable: true,
	            data: webkitDep.nodes.map(function (node, idx) {
	                node.id = idx;
	                return node;
	            }),
	            categories: webkitDep.categories,
	            force: {
	                edgeLength: 5,
	                repulsion: 20,
	                gravity: 0.2
	            },
	            edges: webkitDep.links
	        }]
	    };

	    myChart.setOption(option);
	});

	option && myChart.setOption(option);
	</script>
</body>
</html>